<template>

<div>
<h2 style="color:cyan; margin-top: 15px;">养殖信息 &nbsp; <el-button type="primary" @click="open">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" >
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="品种">
      :{{ breeds.breedName }}
    </el-form-item>
        &nbsp; &nbsp; &nbsp;<el-form-item label="来源">
      :{{ breeds.source }}
    </el-form-item>
    <br/>
       <el-form-item label="饲养天数">
      :{{ breeds.feeding_Days }}
    </el-form-item>
         <el-form-item label="饲养品牌">
      :{{ breeds.feed_Brand }}
    </el-form-item>
    <br/>
     <el-form-item label="饲养负责人">
      :{{ breeds.breedPerson }}
    </el-form-item>
         <el-form-item label="出栏日期">
      :{{ moment(breeds.slaughter_Day).format("YYYY年-MM月-DD日:MM:SS") }}
    </el-form-item>
    <br/>
    
  </el-form>
</el-form>
 <el-dialog v-model="logic.isOpen" title="养殖信息" width="500" align-center draggable>
    <el-form label-width="120">
      <el-form-item label="品种" >
        <el-input  v-model="Breed.breedName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="来源" >
        <el-input v-model="Breed.source" autocomplete="off" />
      </el-form-item>
       <el-form-item label="饲养天数" >
        <el-input v-model="Breed.feeding_Days" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养品牌" >
        <el-input v-model="Breed.feed_Brand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="饲养负责人" >
        <el-input v-model="Breed.breedPerson" autocomplete="off" />
      </el-form-item>
        <el-form-item label="出栏日期">
      <el-col :span="11">
        <el-date-picker
         value-format="YYYY-MM-DD"
          type="date"
          v-model="Breed.slaughter_Day"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-col>
        </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpen = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
   <el-dialog v-model="logic2.isOpen" title="企业信息" width="500" align-center draggable>
    <el-form label-width="120">
      <el-form-item label="养殖场" >
        <el-input  v-model="BreedFarming.breeding_Farm" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" >
        <el-input v-model="BreedFarming.breeding_Person" autocomplete="off" />
      </el-form-item>
       <el-form-item label="存栏数量" >
        <el-input v-model="BreedFarming.stocksNum" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic2.isOpen = false">取消</el-button>
        <el-button type="primary" @click="saveNum">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
  <div>
    <h2 style="color:cyan; margin-top: 15px;">保健信息 &nbsp; <el-button type="primary" @click="AddRow">新增行</el-button></h2>
<br/>
<hr>
  <el-table :data="tableData" height="250" style="width: 100%" max-height="980px">
    <el-table-column prop="feedDays" label="饲养天数" width="250">
      <template v-slot="scope">
        <template v-if="scope.row.isEditing">
          <el-input v-model="scope.row.feedDays" size="small" placeholder="请输入饲养天数"></el-input>
        </template>
         <template v-else>
          {{ scope.row.feedDays }}
         </template>
      </template>
     
    </el-table-column>
    
    <el-table-column prop="immuneWay" label="保健方式" width="250">
      <template v-slot="scope">
        <template v-if="scope.row.isEditing">
          <el-input v-model="scope.row.immuneWay" size="small" placeholder="请输入保健方式"></el-input>
        </template>
         <template v-else>
          {{ scope.row.immuneWay }}
         </template>
      </template>
     
    </el-table-column>

    <el-table-column prop="immuneMethod" label="保健方法" width="250">
       <template v-slot="scope">
        <template v-if="scope.row.isEditing">
          <el-input v-model="scope.row.immuneMethod" size="small" placeholder="请输入保健方法"></el-input>
        </template>
         <template v-else>
          {{ scope.row.immuneMethod }}
         </template>
      </template>
     
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <template v-if="scope.row.isEditing">
          <el-button type="primary" @click="hangAdd(scope.$index)">保存</el-button>
        <el-button type="danger" @click="handCancul(scope.$index)">取消</el-button>
        </template>
        <template v-else>
           <el-button type="warning" @click="handUpdate(scope.$index)">修改</el-button>
        <el-button type="danger"@click=handDelete(scope.$index)>删除</el-button>
        </template>
       
      </template>
    </el-table-column>
  </el-table>


<div>
  <h2 style="color:cyan; margin-top: 15px;">动检证</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</div>


  <h2 style="color:cyan; margin-top: 15px;">企业信息 &nbsp; <el-button type="primary" @click="open2">设置</el-button></h2>
<br/>
<hr>
<el-form inline="true" >
   <el-form :inline="true" style="margin-top: 15px;margin-left: 15px;" class="demo-form-inline">
      &nbsp;<el-form-item label="养殖场">
      :{{ farms.breeding_Farm }}
    </el-form-item>
        &nbsp; &nbsp; &nbsp;<el-form-item label="负责人">
      :{{ farms.breeding_Person }}
    </el-form-item>
    <br/>
       <el-form-item label="存栏数量">
      :{{ farms.stocksNum }}
    </el-form-item>
        

    <br/>
    
  </el-form>
</el-form>
</div>
<div>
  <h2 style="color:cyan; margin-top: 15px;">企业照片</h2>
<br/>
<hr>
 <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</div>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,watch } from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'
const router=useRouter();
const route=useRoute();
import { useCounterStore } from '@/stores/counter';
const store=useCounterStore();
import { type FormInstance, type FormRules,ElMessage,ElMessageBox } from 'element-plus'
import moment from 'moment';
onMounted(()=>{
  GetBreeding();
  GetFarming();
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    feedDays: "35",
    immuneWay: '兔瘟单苗',
    immuneMethod: '皮下注射',
    isEditing: false,
    productionBatch:route.query.productionBatch
  },
  {
    id: 2,
    feedDays: "40",
    immuneWay: '巴二联苗',
    immuneMethod: '皮下注射',
    isEditing: false,
    productionBatch:route.query.productionBatch
  }
]);
//新增行
const AddRow=()=>{
  tableData.value.push({
    id:Date.now(),
    feedDays:'',
    immuneWay: '',
    immuneMethod: '',
    isEditing: true,
    productionBatch:route.query.productionBatch

  })
}

const hangAdd=(index:any)=>{

  var row=tableData.value[index]

  row.isEditing=false;

  //后端代码业务逻辑
    axios.post("http://localhost:5219/api/Management/ImmuneAdd",row).then(res=>{
    if(res.data.code==200)
  {
       ElMessage.success(res.data.message);
    

  }
  else
  {
     ElMessage.error(res.data.message);
        return;
  }
  })
 
  
}
//更改操作
const handUpdate=(index:any)=>{

  tableData.value[index].isEditing=true;

}
//取消操作
const handCancul=(index:any)=>{
    var row=tableData.value[index]
  if(!row.feedDays || row.immuneWay|| !row.immuneMethod)
{
tableData.value.splice(index,1)
}

 row.isEditing=false;
}
//删除操作
const handDelete=(index:any)=>{

  tableData.value.splice(index,1);
}


//逻辑对象
const logic=reactive({
isOpen:false,

})
//逻辑对象
const logic2=reactive({
isOpen:false,

})

//养殖企业信息
const BreedFarming=reactive({
  breeding_Farm: "",
  breeding_Person: "",
  stocksNum: "",
  productionBatch: route.query.productionBatch
})
//打开养殖企业信息的对话框
const open2=()=>{
  logic2.isOpen=true;
}
//保存养殖企业信息的方法
const saveNum=()=>{

axios.post("http://localhost:5219/api/Management/AddFarming",BreedFarming).then(res=>{
  if(res.data.code==200)
{
ElMessage.success(res.data.message);

logic2.isOpen=false;
}
else
{
  ElMessage.error(res.data.message);
  return;
}
})
}
//显示养殖企业信息
const farms=ref<any>([])
const GetFarming=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetFarming",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      farms.value=res.data.data;
  })
}
//养殖信息对象
const Breed=reactive({
  
  breedName: "",
  source: "",
  feeding_Days: "",
  feed_Brand: "",
  breedPerson: "",
  slaughter_Day: "",
  productionBatch: route.query.productionBatch

})
//打开养殖信息对话框
const open=()=>{

  logic.isOpen=true;
  Breed.breedName="",
  Breed .source="",
  Breed.feeding_Days="",
  Breed.feed_Brand="",
  Breed.breedPerson="",
  Breed.slaughter_Day=""

}
//新增养殖信息
const save=()=>{
  axios.post("http://localhost:5219/api/Management/AddBreeding",Breed).then(res=>{
    if(res.data.code==200)
  {
       ElMessage.success(res.data.message);
        logic.isOpen=false;
        GetBreeding();
  }
  else
  {
     ElMessage.error(res.data.message);
        return;
  }
  })

}
//显示养殖信息
const breeds=ref<any>([])
const GetBreeding=()=>{
  let productionBatch=route.query.productionBatch
  axios.get("http://localhost:5219/api/Management/GetBreeding",{
    params:{
      productionBatch:productionBatch
    }
  }).then(res=>{
      breeds.value=res.data.data;
  })
}

//关于图片
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>